<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>清风向阳</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="Joker,Joker's Blog" />
  
  <meta property="og:type" content="website">
<meta property="og:title" content="清风向阳">
<meta property="og:url" content="http://mjjde.github.io/page/3/index.html">
<meta property="og:site_name" content="清风向阳">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="清风向阳">
  
  
    <link rel="icon" href="/favicon_pic.ico">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
  

</head>

<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-menu" class="header-menu-pos animated">
            <div class="header-menu-container">
                <a href="/" class="left">
                    <span class="site-title">Joker&#39;s Blog</span>
                </a>
                <nav id="header-menu-nav" class="right">
                    
                    <a  href="/">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                    
                    <a  href="/archives">
                        <i class="fa fa-archive"></i>
                        <span>Archives</span>
                    </a>
                    
                    <a  href="/about">
                        <i class="fa fa-user"></i>
                        <span>About</span>
                    </a>
                    
                </nav>
                <a class="mobile-header-menu-button">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/images/avatar.jpg" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        Joker&#39;s Blog
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        一个认真的技术博客
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Joker"  href="//joker-studio.pub">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com/mjjde">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>
      <div class="outer">
        <section id="main" class="body-wrap">
  
    <article id="post-widget和Notification上的RemoteView" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/03/16/widget和Notification上的RemoteView/"  >widget和Notification上的RemoteView</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2016/03/16/widget和Notification上的RemoteView/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="widget和Notification上的RemoteView" title="widget和Notification上的RemoteView">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
我们在开发过程中有关于View的基本都是在当前的进程，那么会不会存在一个需要我们编写一个远程使用View的需求呢，答案是肯定的。我们在开发桌面小工具或者自定义消息通知栏的布局的时候，我们就有可能需要编写远程的View-RemoteView.
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2016-03-16</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/widget/" class="color2">widget</a>
      
    <a href="/tags/Notification/" class="color3">Notification</a>
      
    <a href="/tags/RemoteView/" class="color1">RemoteView</a>
      
  </li>

        </ul>
        
            <a href="/2016/03/16/widget和Notification上的RemoteView/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-android事件分发机制" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/01/15/android事件分发机制/"  >android事件分发机制</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2016/01/15/android事件分发机制/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="android事件分发机制" title="android事件分发机制">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
Android事件分发机制是我们学习Android必须要面临的问题，通常会涉及到事件冲突等问题，这也是对于新手来说比较复杂的学习过程。Android事件处理和Java类似，都是向上冒泡。一组事件序列包括down move move… up ,是以按下为开始，经历0或多个移动，最后以抬起结束。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2016-01-15</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/Android/" class="color3">Android</a>
      
    <a href="/tags/事件/" class="color3">事件</a>
      
  </li>

        </ul>
        
            <a href="/2016/01/15/android事件分发机制/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-Android-IPC通讯Binder和Service的关系" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/01/05/Android-IPC通讯Binder和Service的关系/"  >Android-IPC通讯Binder和Service的关系</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2016/01/05/Android-IPC通讯Binder和Service的关系/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="Android-IPC通讯Binder和Service的关系" title="Android-IPC通讯Binder和Service的关系">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
任何系统都有自己的跨进程通讯，Android是基于Linux，所以都会兼容Linux的通讯机制，包括有管道，信号，socket等等。基于Android自身的特点，有提出了自己的通讯方式Binder机制。接下来就来具体的介绍。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2016-01-05</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/Binder/" class="color2">Binder</a>
      
    <a href="/tags/Android-IPC/" class="color2">Android-IPC</a>
      
  </li>

        </ul>
        
            <a href="/2016/01/05/Android-IPC通讯Binder和Service的关系/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-Activity的进阶" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/12/28/Activity的进阶/"  >Activity的进阶</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2015/12/28/Activity的进阶/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="Activity的进阶" title="Activity的进阶">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
Activity的生命周期变化有两种情况，一个是人为，一个是系统干预。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2015-12-28</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/Activity/" class="color4">Activity</a>
      
  </li>

        </ul>
        
            <a href="/2015/12/28/Activity的进阶/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-EventBus2-4-0源码分析之Post" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/12/25/EventBus2-4-0源码分析之Post/"  >EventBus2-4-0源码分析之Post</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2015/12/25/EventBus2-4-0源码分析之Post/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="EventBus2-4-0源码分析之Post" title="EventBus2-4-0源码分析之Post">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
上篇我们介绍了EventBus的注册，这篇我们主要介绍注册之后，EventBus是如何触发事件，传递事件，最后让注册者接受到事件。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2015-12-25</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/Rxjava/" class="color2">Rxjava</a>
      
  </li>

        </ul>
        
            <a href="/2015/12/25/EventBus2-4-0源码分析之Post/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-EventBus2-4-0源码分析之订阅" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/12/23/EventBus2-4-0源码分析之订阅/"  >EventBus2-4-0源码分析之订阅</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2015/12/23/EventBus2-4-0源码分析之订阅/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="EventBus2-4-0源码分析之订阅" title="EventBus2-4-0源码分析之订阅">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
EventBus最新的版本是3.0了但是beta版，所有我们还是按2.4分析源码是如何工作的，EventBus是一个简化Activities, Fragments, Threads, Services等等直接通信的框架。GitHub上的原文：Android optimized event bus that simplifies communication between Activities, Fragments, Threads, Services, etc. Less code, better quality。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2015-12-23</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/Rxjava/" class="color2">Rxjava</a>
      
  </li>

        </ul>
        
            <a href="/2015/12/23/EventBus2-4-0源码分析之订阅/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-Rxjava-简化你的异步调用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/12/14/Rxjava-简化你的异步调用/"  >Rxjava-简化你的异步调用</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2015/12/14/Rxjava-简化你的异步调用/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="Rxjava-简化你的异步调用" title="Rxjava-简化你的异步调用">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
Rxjava好似一股春风，刮到了各地的论坛，博客，其实Rxjava给我们带来的是一个对编程思维的改变，它改变了我们对异步回调的正常模式，主张链式是最具表达力的方式，方便阅读，代码清晰，调理清楚。我们传统的回调都是采用接口的模式，而Rxjava给我们带来了新的体验，那么我们就好领略下它的魅力吧。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2015-12-14</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/Rxjava/" class="color2">Rxjava</a>
      
  </li>

        </ul>
        
            <a href="/2015/12/14/Rxjava-简化你的异步调用/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-Volley-网络通讯框架二之处理请求" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/12/11/Volley-网络通讯框架二之处理请求/"  >Volley-网络通讯框架二之处理请求</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2015/12/11/Volley-网络通讯框架二之处理请求/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="Volley-网络通讯框架二之处理请求" title="Volley-网络通讯框架二之处理请求">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                说到Volley的请求处理，其实并没有，只是使用了Android自带的HTTP工具类HttpURLConnection和HttpClient，我们知道这两个类根据Android系统版本的不同，会有各自的优点和缺点。Volley只是合理的对两着进行取舍。所以个人认为Volley更像是一个Http工具，帮我们管理请求队列，请求分发，缓存处理等等，当然我们也可以不用以上两个Http工具类，比如使用OkHttp来作为我们request处理者。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2015-12-11</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/volley/" class="color2">volley</a>
      
  </li>

        </ul>
        
            <a href="/2015/12/11/Volley-网络通讯框架二之处理请求/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-Volley-网络通讯框架一之发起请求" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/12/11/Volley-网络通讯框架一之发起请求/"  >Volley 网络通讯框架一之发起请求</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/Android技术/">Android技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2015/12/11/Volley-网络通讯框架一之发起请求/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="Volley 网络通讯框架一之发起请求" title="Volley 网络通讯框架一之发起请求">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
Android系统给我们提供了一些最直接的HTTP库，和相关的工具类，AsyncTaskLoader，HttpURLConnection，AsyncTask，HTTPClient（Apache）等等，这些东西在使用的时候都没有系统性的管理者，导致在一个APP中很难有效的去管理请求，而且我们也会对除请求之外的事情也要关心，基于此，我们可能需要一个框架来统一我们的网络请求。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2015-12-11</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/volley/" class="color2">volley</a>
      
  </li>

        </ul>
        
            <a href="/2015/12/11/Volley-网络通讯框架一之发起请求/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  
    <article id="post-github-hexo构建自己的博客" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/12/09/github-hexo构建自己的博客/"  >github+hexo构建自己的博客</a>
    </h1>
  

          
              <span class="header-cate">
                <i class="fa fa-map-marker"></i>
                  
                  <a href="/categories/其他技术/">其他技术</a>
                  
              </span>
          
      </header>
    
    <div class="article-entry " itemprop="articleBody">
      
        <div class="article-img">
            <a href="/2015/12/09/github-hexo构建自己的博客/" >
                
                <img src="http://mjjde.github.io/images/banner.jpg" alt="github+hexo构建自己的博客" title="github+hexo构建自己的博客">
                
            </a>
        </div>
        <div class="article-feed">
            <p>
                
宽敞漂亮的房子是每个人的追求，而对于我们的程序员来说，还需要一个自己的个人空间，那里记录了自己的汗水，记录着折磨过几天的天坑，是我们吃一堑长一智的见证，所有我们要追求一个高大上的地方，来存放自己的一片天地。
            </p>
        </div>
      
    </div>
    <footer class="article-footer">
        
        <ul class="article-footer-menu">
            
                <li><i class="fa fa-calendar"></i>2015-12-09</li>
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/other/" class="color1">other</a>
      
  </li>

        </ul>
        
            <a href="/2015/12/09/github-hexo构建自己的博客/#more" class="article-more-link" >更多阅读&gt;&gt;</a>
        
    </footer>
  </div>
</article>


  


  <nav id="page-nav">
    <a class="extend prev" rel="prev" href="/page/2/"><< Prev</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span>
  </nav>
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by  <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2018 Joker Mei<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "http://mjjde.github.io",
      animate: false,
      isHome: true,
      share: true
  }
</script>
<div class="sidebar">
    <!-- <div id="sidebar-search" title="Search">
        <i class="fa fa-search"></i>
    </div> -->
    <div id="sidebar-category" title="Categories">
        <i class="fa fa-book"></i>
    </div>
    <div id="sidebar-tag" title="Tags">
        <i class="fa fa-tags"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box" id="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-categories">
            <a class="category-link" href="/categories/Android技术/">Android技术</a><a class="category-link" href="/categories/其他技术/">其他技术</a><a class="category-link" href="/categories/网络技术/">网络技术</a><a class="category-link" href="/categories/设计模式/">设计模式</a>
        </div>
        <div id="sidebar-menu-box-tags">
            <a href="/tags/Activity/" style="font-size: 10px;">Activity</a> <a href="/tags/Android/" style="font-size: 16px;">Android</a> <a href="/tags/Android-IPC/" style="font-size: 10px;">Android-IPC</a> <a href="/tags/Binder/" style="font-size: 16px;">Binder</a> <a href="/tags/DiskLruCache/" style="font-size: 10px;">DiskLruCache</a> <a href="/tags/Fragment/" style="font-size: 10px;">Fragment</a> <a href="/tags/HTTP/" style="font-size: 20px;">HTTP</a> <a href="/tags/Java/" style="font-size: 10px;">Java</a> <a href="/tags/Notification/" style="font-size: 10px;">Notification</a> <a href="/tags/RemoteView/" style="font-size: 10px;">RemoteView</a> <a href="/tags/Rxjava/" style="font-size: 14px;">Rxjava</a> <a href="/tags/ServiceManager/" style="font-size: 14px;">ServiceManager</a> <a href="/tags/android/" style="font-size: 12px;">android</a> <a href="/tags/gradle/" style="font-size: 10px;">gradle</a> <a href="/tags/java/" style="font-size: 18px;">java</a> <a href="/tags/other/" style="font-size: 10px;">other</a> <a href="/tags/volley/" style="font-size: 12px;">volley</a> <a href="/tags/widget/" style="font-size: 10px;">widget</a> <a href="/tags/事件/" style="font-size: 10px;">事件</a> <a href="/tags/组件化/" style="font-size: 10px;">组件化</a> <a href="/tags/设计模式/" style="font-size: 18px;">设计模式</a>
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="mobile-header-menu-nav" id="mobile-header-menu-nav">
    <div id="mobile-header-menu-container">
        <span class="title">Menu</span>
        <ul class="mobile-header-menu-navbar">
            
            <li>
                <a  href="/">
                    <i class="fa fa-home"></i><span>Home</span>
                </a>
            </li>
            
            <li>
                <a  href="/archives">
                    <i class="fa fa-archive"></i><span>Archives</span>
                </a>
            </li>
            
            <li>
                <a  href="/about">
                    <i class="fa fa-user"></i><span>About</span>
                </a>
            </li>
            
        </ul>
    </div>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
    <div class="search-container" id="search-container">
        <ul class="search-result" id="search-result">
        </ul>
    </div>
</div>

<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/main.js"></script>








  </div>
</body>
</html>